<template>
  <div id='app'>
    <button v-on:click="onAxiosSend">点击我发送Axios请求.</button>
    <img :src="imageUrl" alt="图片">
  </div>

</template>

<script>
import axios from 'axios'//引入axios

// const AxiosInst = axios.create({
//     baseURL: HOST,
//     timeout: 10000000000,
//     responseType: "json",
//     withCredentials: true, // 是否允许带cookie这些
//     headers: {
//       'Content-Type': 'application-json/x-www-form-urlencoded;charset=utf-8',
//     }
//   });


  axios .interceptors.request.use( config => {
    //在发送请求之前做的一些操作，例如加上token这些
     debugger
     console.log("请求拦截器")
     return config
}, error => {
     //对请求错误做些什么
     return Promise.reject(error)
})

axios.interceptors.response.use(response => {
      //接收到响应后要做些什么，比如跳转到登录页
      console.log("响应拦截器")
      return response
}, error => {
     //对响应错误做些什么
     return Promise.reject(error)
})



export default {
  name: 'AxiosLjqComponent',
  data () {
    // debugger
    return {
      imageUrl: ''
    }
  },
  methods: {
    onAxiosSend: function () {
      var that = this
      axios.get(
        "https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF",//请求接口
        {
          responseType: 'blob'
        }//
      )
      .then(function (res){
        //接口成功返回结果执行
         that.imageUrl = URL.createObjectURL(res.data)
      })
      .catch(function(err){
           console.log("onAxiosSend failed"+err);//请求失败或者接口返回失败或者.then()中的代码发生错误时执行
      })

    }
  }
}
</script>
